<template>
  <div style="width:100%;height:100vh;background:#414141;">
    <mt-header fixed :title="$t('recharge_withdraw')" style="background:#1d1d1d;color:#fff;">
      <div slot="left">
        <router-link to="" slot="left" style="text-decoration: none;color: #fff;">
          <mt-button @click="$router.back(-1)" icon="back"></mt-button>
        </router-link>
      </div>
    </mt-header>
    <div style="width: 100%;height:.95rem;"></div>
    <div style="margin:4rem 1rem;line-height: 1rem;">
      <mt-field :label="$t('money')" :placeholder="$t('input_money')" v-model="fee" style="background:#414141;width: 100%;height: 1.2rem;border: 1px solid #333;color: #FFFFFF;"></mt-field>
      <div style="font-size: 14px;color: #fff;">
        {{ Number(fee || 0) }}{{$t('dollor')}}≈
        <span style="color: red;">{{ Number((fee || 0) * (huilv || 0)).toFixed(2) }}</span>
        {{$t('cny')}}
      </div>
      <div style="margin-top: 1rem;">
        <mt-button @click="bntlist && chongzhi()" style="background:#6600db;color:#fff;border: none;border:1px solid #333;font-size:.4rem;letter-spacing:3px;" size="large">
          {{$t('recharge')}}
        </mt-button>
      </div>
      <div style="margin-top: 1rem;">
        <mt-button @click="bntlist && tixian()" style="background:#6600db;color:#fff;border: none;border:1px solid #333;font-size:.4rem;letter-spacing:3px;" size="large">
          {{$t('withdraw')}}
        </mt-button>
      </div>
    </div>
    <div v-if="alertborder" class="al_border">
      <div class="iframe_border">
        <iframe :src="chongzhiurl" width="100%" height="100%"></iframe>
      </div>
      <div class="al_btn" @click="alertborder = false;fee = '';">
        {{$t('close')}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      huilv: 0, //汇率
      fee: '',
      phone:'',
      alertborder: false,
      chongzhiurl: '',
      bntlist: true,
      data: {}
    };
  },
  computed: {},
  mounted() {
    this.obtain();
  },
  methods: {
    //获取信息
    obtain() {
      this.$get('addons/tf-futures/member/my-info').then(res => {
        // console.log(res.data.hl.close,'资金状态');
        if (res.code == 200) {
          this.huilv = Number(res.data.hl.close);
        } else {
          console.log(res.message || '获取用户资金状态出错 ');
        }
      });
    },
    chongzhi() {
      this.bntlist = false;
      let that = this;
      if (this.fee == '') {
        this.bntlist = true;
        return this.$layer.msg(this.$t('input_money'));
      } else {
        this.$get('v1/pay-top/charge?form=pc&money=' + this.fee ).then(res => {
          that.bntlist = true;
          that.$layer.msg(this.$t('jump_to_pay_page'));
          if(res.code == 200){
            that.alertborder = true;
            that.chongzhiurl = res.data.pay_url;
          }else{
            that.$layer.msg(res.message);
          }
        });
      }
    },
    tixian() {
      this.bntlist = false;
      if (this.fee == '') {
        this.bntlist = true;
        return this.$layer.msg(this.$t('input_money'));
      }
      this.$post('v1/pay-top/withdrawal', { price: this.fee }).then(res => {
        this.bntlist = true;
        if (res.code == 200) {
          this.$layer.msg(res.message || '出金请求已提交,等待工作人员审核！');
          this.fee = '';
        } else {
          this.$layer.msg(res.message || '出金请求失败');
        }
      });
    }
  }
};
</script>

<style scoped>
.al_border {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  border-radius: 5px;
  position: fixed;
  top: 0px;
  left: 0px;
  background: #fff;
}
.al_border .iframe_border {
  width: 100%;
  height: calc(100vh - 2rem);
  box-sizing: border-box;
  padding-top: 0.95rem;
}
.al_border .al_btn {
  margin: 0 auto;
  margin-top: 0.5rem;
  width: 4rem;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  border-radius: 5px;
  background: #007f00;
  color: #fff;
}
.login_input {
  width: 100%;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
}

.login_input > span {
  font-size: 1.2rem;
  color: #333;
}

.login_input > input {
  width: 50%;
  height: 2rem;
  padding: 0 0.5rem;
  box-sizing: border-box;
}

.login_button {
  width: 100%;
  height: 3rem;
  /* background: red; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.login_button > button {
  width: 9rem;
  height: 3rem;
  letter-spacing: 1px;
  line-height: 2rem;
  background: #6e9bcc;
  border-radius: 3px;
  background-image: linear-gradient(to bottom, #63c639, #52ad29, #399c10, #399410, #399410);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 auto;
  border: none;
  margin-left: 12rem;
}
</style>
